<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title>ICONFONT 图标</title>
    <style>
        *{margin: 0;padding: 0;list-style: none;}
        /** 清除内外边距 **/
        body, h1, h2, h3, h4, h5, h6, hr, p, blockquote, /* structural elements 结构元素 */
        dl, dt, dd, ul, ol, li, /* list elements 列表元素 */
        pre, /* text formatting elements 文本格式元素 */
        form, fieldset, legend, button, input, textarea, /* form elements 表单元素 */
        th, td /* table elements 表格元素 */ {
            margin: 0;
            padding: 0;
        }

        /** 设置默认字体 **/
        body,
        button, input, select, textarea /* for ie */ {
            font: 12px/1.5 tahoma, arial, \5b8b\4f53, sans-serif;
        }
        h1, h2, h3, h4, h5, h6 { font-size: 100%; }
        address, cite, dfn, em, var { font-style: normal; } /* 将斜体扶正 */
        code, kbd, pre, samp { font-family: courier new, courier, monospace; } /* 统一等宽字体 */
        small { font-size: 12px; } /* 小于 12px 的中文很难阅读，让 small 正常化 */

        /** 重置列表元素 **/
        ul, ol { list-style: none; }

        /** 重置文本格式元素 **/
        a { text-decoration: none; }
        a:hover { text-decoration: underline; }


        /** 重置表单元素 **/
        legend { color: #000; } /* for ie6 */
        fieldset, img { border: 0; } /* img 搭车：让链接里的 img 无边框 */
        button, input, select, textarea { font-size: 100%; } /* 使得表单元素在 ie 下能继承字体大小 */
        /* 注：optgroup 无法扶正 */

        /** 重置表格元素 **/
        table { border-collapse: collapse; border-spacing: 0; }

        /* 清除浮动 */
        .ks-clear:after, .clear:after {
            content: '\20';
            display: block;
            height: 0;
            clear: both;
        }
        .ks-clear, .clear {
            *zoom: 1;
        }

        .main {padding: 30px 100px;}
        .main h1{font-size:36px; color:#333; text-align:left;margin-bottom:30px; border-bottom: 1px solid #eee;}

        .helps{margin-top:40px;}
        .helps pre{
            padding:20px;
            margin:10px 0;
            border:solid 1px #e7e1cd;
            background-color: #fffdef;
            overflow: auto;
        }

        .icon_lists li{
            float:left;
            width: 100px;
            height:180px;
            text-align: center;
        }
        .icon_lists .icon{
            font-size: 42px;
            line-height: 100px;
            margin: 10px 0;
            color:#333;
            -webkit-transition: font-size 0.25s ease-out 0s;
            -moz-transition: font-size 0.25s ease-out 0s;
            transition: font-size 0.25s ease-out 0s;

        }
        .icon_lists .icon:hover{
            font-size: 100px;
        }

    </style>
    <link rel="stylesheet" href="iconFont.css">
    <style>
        body{ background: none }
    </style>
</head>
<body>
<div class="main">
    <h1>ICONFONT 图标</h1>
    <ul class="icon_lists clear">
        
        <li>
            <i class="icon gmIcon gmIcon-gm_red"></i>

            <div class="fontclass">.gm_red</div>
        </li>
        
    </ul>
    <div class="helps">
        第一步：使用font-face声明字体
            <pre>
            @font-face {
                font-family: "gm";
                src: url('./gm.eot');
                src: url('./gm.eot?#iefix') format('eot'),
                    url('./gm.woff') format('woff'),
                    url('./gm.ttf') format('truetype'),
                    url('./gm.svg#gm') format('svg');
            }
</pre>
        第二步：定义使用iconfont的样式
            <pre>
.gmIcon{
    font-family:"gm" !important;
    font-size:16px;font-style:normal;
    -webkit-font-smoothing: antialiased;
    -webkit-text-stroke-width: 0.2px;
    -moz-osx-font-smoothing: grayscale;}
</pre>
        第三步：挑选相应图标并获取相应class，应用于页面,【gmIcon-xxxx】=【gmIcon-】前缀+【每个图标对应的class】
<pre>
&lt;i class="gmIcon gm-xxxx"&gt;&lt;/i&gt;
</pre>
    </div>
    <p style="color: grey"> 此页面模板来自 <a href="http://www.iconfont.cn">www.iconfont.cn</a>,侵权则删</p>
</div>
</body>
</html>